/* eslint-disable @typescript-eslint/no-unused-expressions */
import React, { FC, useCallback, useEffect, useState, useMemo } from "react";
import { connect } from "react-redux";
import action from "../../../store/Actions";
import DetailSdormitory from '../../../component/DetailSdormitory'

import './dormitory.less'
import './index.less'
interface State {
  zrs: string;
  dataList: any,
  inset: string
  falg: boolean,
  ssz: string,
  dataQuery: Array<any>,
  name: string,
}
interface Props {
  dormitoryReducer: any;
  datalist: Array<any>,
  keyPath: Array<string>
  iszrs: Function,
}

const dormitory: FC<Props> = (props: Props) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [state, setSate] = React.useState<State>({
    dataList: {},
    inset: "",
    falg: false,
    ssz: "",
    dataQuery: [],
    name: '',
    zrs: '',
  });

  function getWeekDate() {
    var now = new Date();
    var day = now.getDay();
    var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var week = weeks[day];
    setSate({
      ...state,
      inset: week,
    })
  }
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getWeekDate()
  }, [])
  const showModal = (val) => {
    localStorage.setItem('val',val.id)
    setSate({
      ...state,
      falg: true,
      dataList:val,
    })
    props.iszrs({ inset: state.inset, DormitoryNo: val.DormitoryNo ,val })
    localStorage.setItem('DormitoryNo', val.DormitoryNo)
  };
  const close = () => {
    setSate({
      ...state,
      falg: false,
    })
  }
  return (
    <div className="dormitory">
      {
        props.dormitoryReducer.dataList.length > 0 ? <div className="head">
          <span><div className="zrs"></div><div>值日生</div></span><span><div className="ssz"></div><div>宿舍长</div></span>
        </div> : null
      }
      <div className="constMys" >
        {
          props.dormitoryReducer.dataList.map((item) => {
            return <div className="oderlist">
              <div className="fllistolis" onClick={() => { showModal(item) }}>
                <div className="dormitoryMast">
                  {/* 一号床铺 */}
                  <div className="chuangpu">
                    <div className={state.inset === item.person[0].timer ? 'active' : "Mast"}>
                      <div className={item.person[0].falgboolean === true ? 'act' : "typeId"}>{item.person[0].id}</div>
                      <div className="a">{item.person[0].name}</div>
                    </div>
                    <div>
                      <div className="border"></div>
                      <div className="border1"></div>
                      <div className="border2"></div>
                    </div>
                    <div className={state.inset === item.person[1].timer ? 'active1' : "dorm"}>
                      <div className={item.person[1].falgboolean === true ? 'act' : "typeId"}>{item.person[1].id}</div>
                      <div className="a">{item.person[1].name}</div>
                    </div>
                  </div>
                  {/* 二号床铺 */}
                  <div className="chuangpu">
                    <div className={state.inset === item.person[2].timer ? 'active' : "Mast"}>
                      <div className={item.person[2].falgboolean === true ? 'act' : "typeId"}>{item.person[2].id}</div>
                      <div className="a">{item.person[2].name}</div>
                    </div>
                    <div>
                      <div className="border"></div>
                      <div className="border1"></div>
                      <div className="border2"></div>
                    </div>
                    <div className={state.inset === item.person[3].timer ? 'active1' : "dorm"} >
                      <div className={item.person[3].falgboolean === true ? 'act' : "typeId"}>{item.person[3].id}</div>
                      <div className="a">{item.person[3].name}</div>
                    </div>
                  </div>
                  {/* 三号床铺 */}
                  <div className="chuangpu">
                    <div className={state.inset === item.person[4].timer ? 'active' : "Mast"}>
                      <div className={item.person[4].falgboolean === true ? 'act' : "typeId"}>{item.person[4].id}</div>
                      <div className="a">{item.person[4].name}</div>
                    </div>
                    <div>
                      <div className="border"></div>
                      <div className="border1"></div>
                      <div className="border2"></div>
                    </div>
                    <div className={state.inset === item.person[5].timer ? 'active1' : "dorm"}>
                      <div className={item.person[5].falgboolean === true ? 'act' : "typeId"}>{item.person[5].id}</div>
                      <div className="a">{item.person[5].name}</div>
                    </div>
                  </div>
                  {/* 四号床铺 */}
                  <div className="chuangpu">
                    <div className={state.inset === item.person[6].timer ? 'active' : "Mast"}>
                      <div className={item.person[6].falgboolean === true ? 'act' : "typeId"}>{item.person[6].id}</div>
                      <div className="a">{item.person[6].name}</div>
                    </div>
                    <div>
                      <div className="border"></div>
                      <div className="border1"></div>
                      <div className="border2"></div>
                    </div>
                    <div className={state.inset === item.person[7].timer ? 'active1' : "dorm"}>
                      <div className={item.person[7].falgboolean === true ? 'act' : "typeId"}>{item.person[7].id}</div>
                      <div className="a">{item.person[7].name}</div>
                    </div>
                  </div>
                </div>
                <div className={item.evaluate === '优' ? 'btmll' : item.evaluate === '差' ? 'btmlllist' : 'btm'} >
                  <div className="xh">{item.DormitoryNo}</div><div className="bj">编辑</div>
                  <div className="pijia">{item.evaluate}</div>
                </div>
              </div>
            </div>
          })
        }
      </div>
      <div>
        <DetailSdormitory keyPath={props.keyPath} isFalg={state.falg} dataList={state.dataList} name={state.name} dataQuery={state.dataQuery} ssz={state.ssz} close={close} dormitoryReducer zrs={""} DormitoryNo={""} />
      </div>
    </div>
  )
}
export default connect(state => state, action.dormitoryActions)(dormitory) 
